<template>
  <div>
    <div class="page__main">
      <div class="page__scroller" :class="isFirstLogin.show ? 'unscroll': ''">
        <div class="head-action">
          <div class="head-action__left">
            <form class="head-action__search-wrap" @submit.prevent action="#">
              <input
                type="search"
                placeholder="请输入关键字"
                class="head-action__search"
                v-model="search.searchValue"
                @keypress="searchDialog"
              >
              <button type="button" class="head-action__search-btn" @click="handleBtnSearch">搜索</button>
            </form>
          </div>
          <div class="head-action__right">
            <router-link class="head-action__concern" :to="{name: 'Concern'}">关注</router-link>
          </div>
        </div>
        <div class="banner">
          <img class="banner__img" src="@/assets/images/banner.jpg">
          <div class="version-btn" @click="version.show = true">版本记录</div>
        </div>
        <div class="notice" :class="isFirstLogin.step == 1 ? 'highest-index' : ''">
          <div class="notice__wrap">
            <van-swipe style="height: 17px; line-height: 17px" vertical :autoplay="3000" :show-indicators="false">
              <van-swipe-item v-for="(item, index) in noticeList" :key="index" @click="handleNoticeDialog(item, index)">{{item.TITLE}}</van-swipe-item>
            </van-swipe>
          </div>
          <div class="mask__notice" v-show="isFirstLogin.step == 1 && isFirstLogin.show">
            <div class="mask__con mask__con--notice">
              <div class="mask__line"></div>
              <div class="mask__main">
                <div class="mask__title">
                  <span class="mask__title-num">1.</span>
                  新增设公告栏
                </div>
                <div>掌上经分最新动态和新上线功能会及时<br>在公告栏中展现</div>
              </div>
              <button type="button" class="mask__btn mask__btn--next" @click="handleGuide('1')">下一步</button>
            </div>
          </div>
        </div>
        <div :class="isFirstLogin.step == 2 ? 'highest-index' : ''">
          <div class="functions" :class="functionsExpand == true ? 'functions--expand': ''" @click="handleMenuFold" ref="funList">
            <div class="functions__inner">
              <van-loading size="24px" vertical v-show="menuLoading">数据加载中...</van-loading>
              <div
                class="functions__item"
                :class="'functions__item-' + item.menuPicture"
                v-for="(item, index) in menuList"
                :key="index"
                @click="handleToPage(item)">
                <div class="functions__name">{{item.PRIV_NAME}}</div>
              </div>
              <div class="functions__item functions__item-more" v-show="functionsExpandBtn" @click.stop="handleMenuExpand">更多</div>
            </div>
          </div>
          <div class="mask__fun" v-show="isFirstLogin.step == 2 && isFirstLogin.show">
            <div class="mask__con mask__con--fun">
              <div class="mask__line"></div>
              <div class="mask__main">
                <div class="mask__title">
                  <span class="mask__title-num">2.</span>
                  常用功能
                </div>
                <div>聚焦运营分析系统高频访问模块，点击图标可<br>链接至相应功能页面</div>
              </div>
              <button type="button" class="mask__btn mask__btn--next" @click="handleGuide('2')">下一步</button>
            </div>
          </div>
        </div>
        <div :class="isFirstLogin.step == 3 ? 'highest-index' : ''">
          <div class="title">指标速览</div>
          <div class="list">
            <van-loading size="24px" vertical v-show="concern.loading" class="bg-white">数据加载中...</van-loading>
            <div class="list__item" v-for="(item, index) in concern.list" :key="index" @click="handleItemRoute(item.NAME)">
              <div class="list__progress"><Progress :percentage="item.COL2"></Progress></div>
              <div class="list__title">
                <span class="list__title-text">{{item.NAME}}</span>
                <span class="label label--orange">月指标</span>
              </div>
              <div class="list__blocks">
                <!--<div class="list__block">-->
                  <!--<div class="list__nums">-->
                    <!--<span class="list__nums-percent">同比</span>-->
                    <!--<span class="trend" :class="'trend&#45;&#45;' + item.TB">{{item.COL3 > 0 ? '+' + item.COL3 : item.COL3}}</span>-->
                  <!--</div>-->
                <!--</div>-->
                <div class="list__block">
                  <div class="list__nums">
                    <span class="list__nums-percent">环比</span>
                    <span class="trend" :class="'trend--' + item.HB">{{item.COL4 > 0 ? '+' + item.COL4 : item.COL4}}</span>
                  </div>
                </div>
              </div>
              <div class="list__goal">
                <div class="list__goal-num">{{item.TARGET}}</div>
                <div class="list__goal-text">(目标值)</div>
              </div>
            </div>
          </div>
          <div class="mask__list" v-show="isFirstLogin.step == 3 && isFirstLogin.show">
            <div class="mask__con mask__con--list">
              <div class="mask__main">
                <div class="mask__title">
                  <span class="mask__title-num">3.</span>
                  指标速览
                </div>
                <div>融入当前最受关注的统计指标，点击指标可<br>了解详细情况</div>
              </div>
              <div class="mask__line"></div>
            </div>
          </div>
        </div>
        <button type="button" class="mask__btn mask__btn--jump" v-show="isFirstLogin.show" @click="handleGuide('0')">
          {{isFirstLogin.step == 3 ? '我知道了' : '跳过'}}</button>
      </div>
      <div class="version-dialog" v-show="version.show">
        <div class="version-dialog__main">
          <div class="version-dialog__head">
            <div class="version-dialog__head-title">版本历史记录</div>
          </div>
          <div class="version-dialog__body">
            <div class="version-dialog__versions">
              <div class="version-dialog__item" v-for="(item, index) in version.list">
                <div class="version-dialog__title">
                  <span class="version-dialog__title-left">{{item.version}}</span>
                  <span class="version-dialog__title-right">{{item.date}}</span>
                </div>
                <div v-for="(subItem, subIndex) in item.content">
                  {{subItem}}
                </div>
              </div>
            </div>
          </div>
          <div class="version-dialog__btn" @click="version.show = false">我知道了</div>
        </div>
      </div>
      <div class="dialog-search" v-show="search.show">
        <div class="dialog-search__top">
          <div class="head-action head-action--bg-white">
            <div class="head-action__left">
              <form class="head-action__search-wrap" @submit.prevent action="#">
                <input
                  type="search"
                  placeholder="请输入关键字"
                  class="head-action__search"
                  v-model="search.searchValue"
                  @keypress="searchDialog"
                >
                <button type="button" class="head-action__search-btn" @click="handleBtnSearch">搜索</button>
              </form>
            </div>
            <div class="head-action__right">
              <div class="head-action__search-cancel" @click="searchDialogCancel">取消</div>
            </div>
          </div>
        </div>
        <div class="dialog-search__content">
          <div class="dialog-search__scroll">
            <div class="dialog-search__results" v-show="search.rusults.length > 0">
              <div class="dialog-search__item" v-for="(item, index) in search.rusults" :key="index" @click="handleSearchRouter(item.NAME)">
                {{item.NAME}}
              </div>
            </div>
            <div class="dialog-search__results" v-show="search.rusults.length == 0">
              <div class="dialog-search__item">暂无搜索结果</div>
            </div>
          </div>
        </div>
      </div>
      <div class="notice-dialog" v-show="noticeDialog.show">
        <div class="notice-dialog__main">
          <div class="notice-dialog__head">公告</div>
          <div class="notice-dialog__body">
            <div class="notice-dialog__list">
              <div class="notice-dialog__item" v-for="(item, index) in noticeDialog.list" :key="index">
                <div class="notice-dialog__title">{{item.TITLE}}</div>
                <div class="notice-dialog__date">发布时间：{{item.CREAT_TIME}}</div>
                <div class="notice-dialog__item-con">{{item.CONTENT}}</div>
              </div>
            </div>
          </div>
          <div class="notice-dialog__btns">
            <button
              type="button"
              class="notice-dialog__btn"
              @click="handleNext('prev')"
              :disabled="noticeDialog.currentIndex == 0"
            >
              上一页
            </button>
            <button
              type="button"
              class="notice-dialog__btn"
              @click="handleNext('next')"
              :disabled="noticeDialog.currentIndex == noticeDialog.listLength"
            >
              下一页
            </button>
          </div>
          <button type="button" class="notice-dialog__btn notice-dialog__btn-know" @click="noticeDialog.show = false">我知道了</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Footer from '@/components/Footer'
  import Progress from './Progress'

  export default {
    components:{
      Footer,
      Progress,
    },
    data() {
      return {
        userInfo: this.$store.state.userInfo,
        isFirstLogin: {
          show: false,
          step: 1,
        },
        menuListAll: [],
        menuLoading: false,
        menuList: [],
        functionsExpand: false,
        functionsExpandBtn: false,
        noticeList: [],
        concern: {
          loading: false,
          list: [],
        },
        version: {
          show: false,
          list: []
        },
        search: {
          show: false,
          searchValue: '',
          rusults: []
        },
        noticeDialog: {
          show: false,
          list: [],
          allList: [],
          newList: [],
          listLength: 0,
          currentIndex: 0,
          first: false
        }
      }
    },
    methods: {
      //处理功能列表
      menuInit() {
        if(this.menuListAll.length > 7) {
          this.menuList = this.menuListAll.slice(0, 7)
          this.functionsExpandBtn = true
        } else {
          this.menuList = this.menuListAll
          this.functionsExpandBtn = false
        }
      },
      handleMenuExpand() {
        this.menuList = this.menuListAll
        this.functionsExpandBtn = false
        this.functionsExpand = true
      },
      handleMenuFold() {
        if (this.menuListAll.length > 7) {
          this.menuList = this.menuListAll.slice(0, 7)
          this.functionsExpandBtn = true
          this.functionsExpand = false
        }
      },
      //获得菜单
      getMenuList() {
        let params = {
          userId: this.userInfo.user_id
        }
        this.menuLoading = true
        this.menuListAll = []
        this.$http.post('/api/menu/getMenuList', params).then(data => {
          this.menuListAll = data.menuList.filter(item => {
            return item.PARENT_ID == 10100747
          })
          this.menuListAll.forEach(item => {
            switch (item.PRIV_ID) {
              case 10100748:
                Object.assign(item, {
                  'name': 'ClassifyRank',
                  'menuPicture': 'classifyRank',
                })
                break;
              case 10100749:
                Object.assign(item, {
                  'name': 'AssessTarget',
                  'menuPicture': 'assessTarget',
                })
                break;
              case 10100750:
                Object.assign(item, {
                  'name': 'ManageTarget',
                  'menuPicture': 'manageTarget',
                })
                break;
              case 10100751:
                Object.assign(item, {
                  'name': 'DailyPaper',
                  'menuPicture': 'dailyPaper',
                })
                break;
              case 10101132:
                Object.assign(item, {
                  'name': 'ResolveCase',
                  'menuPicture': 'ResolveCase',
                })
                break;
              case 10101244:
                Object.assign(item, {
                  'name': 'AccountPaper',
                  'menuPicture': 'accountPaper',
                })
                break;
              case 10101756:
                Object.assign(item, {
                  'name': 'DataQuality',
                  'menuPicture': 'dataQuality',
                })
                break;
              case 10102122:
                Object.assign(item, {
                  'name': 'ReportForm',
                  'menuPicture': 'reportForm',
                })
                break;
              case 10102148:
                Object.assign(item, {
                  'name': 'AccountPeriod',
                  'menuPicture': 'accountPeriod',
                })
                break;
              case 10102696:
                Object.assign(item, {
                  'name': 'BusinessEvaluate',
                  'menuPicture': 'businessEvaluate',
                })
                break;
              case 10102890://综合得分
                Object.assign(item, {
                  'name': 'ComprehensiveScore',
                  'menuPicture': 'comprehensiveScore',
                })
                break;
              default:
                break;
            }
          })
          this.menuInit()
          this.menuLoading = false
        })
      },
      //页面跳转
      handleToPage(item) {
        this.$router.push({name: item.name})
      },
      //获得公告列表
      getNoticeList() {
        let params = {
          userId: this.$store.state.userInfo.user_id
        }
        this.$http.post('/api/menu/notice', params).then(data => {
          if (data.notice) {
            if (data.notice.length == 1) {
              Object.assign(data.notice[0], {key: 'only'})
              this.noticeList = [...data.notice, ...data.notice]
            } else {
              this.noticeList = data.notice
            }
            this.noticeDialog.allList = data.notice
            this.noticeDialog.newList = data.notice.filter(item => {
              return item.STATE == 0
            })
            if(!this.isFirstLogin.show) {
              if (this.noticeDialog.newList.length > 0) {
                this.noticeDialog.list.push(this.noticeDialog.newList[0])
                this.noticeDialog.listLength = this.noticeDialog.newList.length - 1
                this.noticeDialog.show = true
                this.noticeDialog.first = true
              }
            }
          }
        })
      },
      //获得版本信息
      getVersions() {
        this.$http.post('/api/new/versionSelect', {}).then(res => {
          let data = res.versionList
          data.forEach(item => {
            let date = item.CREATE_DATE + ''
            this.version.list.push({
              version: item.VERSION_ID,
              date: date.substr(0, 4) + '.' + date.substr(4, 2) + '.' + date.substr(6, 2),
              content: item.CONTENT.split(';')
            })
          })
        })
      },
      //获得重点指标列表
      getFocusInfo() {
        this.concern.loading = true
        this.$http.post('/api/menu/qryFocusInfo', {}).then(data => {
          this.concern.list = data.indicatorsRate
          this.concern.list.forEach((item) => {
            let HB = ''
            let TB = ''
            if (item.COL3 != 0 && item.COL5 > 0) {
              TB = 'asc'
            } else if (item.COL3 != 0 && item.COL5 < 0) {
              TB = 'desc'
            }
            if (item.COL4 != 0 && item.COL6 > 0) {
              HB = 'asc'
            } else if (item.COL4 != 0 && item.COL6 < 0) {
              HB = 'desc'
            }
            if (item.COL3 == 0) {
              item.COL3 = '--'
            }
            if (item.COL4 == 0) {
              item.COL4 = '--'
            }
            Object.assign(item, {HB, TB})
          })
          this.concern.loading = false
        })
      },
      //页面跳转
      handleItemRoute(name) {
          if (name == '塔类项目关闭及时率') {
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'towerClose'}})
          } else if (name == '室分项目关闭及时率') {
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'roomClose'}})
          } else if (name == '高铁地铁项目关闭及时率') {
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'trainClose'}})
          } else if (name == '宏站新建站址交付及时率') {
            this.$router.push({name: 'SiteLocation'})
          } else if (name == '室分长期未起租项目解决率') {
            this.$router.push({name: 'NonDelivery'})
          } else if (name == '室分交付未起租或部分起租解决率') {
            this.$router.push({name: 'NonRent'})
          } else if (name == '宏站长期未交付订单解决率') {
            this.$router.push({name: 'NonDeliveryTower'})
          } else if (name == '宏站本年新建地面塔项目数') {
            this.$router.push({name: 'NewTower'})
          } else if (name == '运营商平均每站址租户数') {
            this.$router.push({name: 'OperatorTenant'})
          }
      },
      //是否初次登陆
      isJudgeFirst() {
        let countLogs = this.userInfo.countLogs
        if (countLogs == '0') {
          this.isFirstLogin.show = false
        } else if (countLogs == '1'){
          this.isFirstLogin.show = true
        }
      },
      //下一步
      handleGuide(param) {
        if (param == '1') {
          this.isFirstLogin.step = '2'
        } else if (param == '2') {
          this.isFirstLogin.step = '3'
        } else {
          this.isFirstLogin.show = false
          //导引结束之后如果有新公告则新公告弹框展示
          if (this.noticeDialog.newList.length > 0) {
            this.noticeDialog.list.push(this.noticeDialog.newList[0])
            this.noticeDialog.listLength = this.noticeDialog.newList.length - 1
            this.noticeDialog.show = true
            this.noticeDialog.first = true
          }
        }
      },
      //搜索弹框弹出
      searchDialog(event) {
        if (event.keyCode == 13) {
          if (this.search.searchValue.trim() == '') {
            this.$dialog.alert({
              title: '温馨提示',
              message: '搜索内容不能为空'
            })
          } else {
            this.handleSearch()
            this.search.show = true
          }
        }
      },
      handleBtnSearch() {
        if (this.search.searchValue.trim() == '') {
          this.$dialog.alert({
            title: '温馨提示',
            message: '搜索内容不能为空'
          })
        } else {
          this.handleSearch()
          this.search.show = true
        }
      },
      //搜索弹框取消
      searchDialogCancel() {
        this.search.show = false
        this.search.rusults = []
        this.search.searchValue = ''
      },
      //搜索数据
      handleSearch() {
        let params = {
          keyword: this.search.searchValue,
          userId: this.userInfo.user_id,
          areaId: this.userInfo.home_city
        }
        this.search.rusults = []
        this.$http.post('/api/focuson/homeFocuson', params).then(data => {
          let result = data.revenue
          this.search.rusults = result
        })
      },
      //搜索列表跳转
      handleSearchRouter(name) {
        switch (name) {
          case '室分长期未起租项目解决率':
            this.$router.push({name: 'NonDelivery'})
            break;
          case '室分交付未起租或部分起租解决率':
            this.$router.push({name: 'NonRent'})
            break;
          case '宏站新建站址交付及时率':
            this.$router.push({name: 'SiteLocation'})
            break;
          case '宏站长期未交付订单解决率':
            this.$router.push({name: 'NonDeliveryTower'})
            break;
          case '塔类项目关闭及时率':
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'towerClose'}})
            break;
          case '室分项目关闭及时率':
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'roomClose'}})
            break;
          case '高铁地铁项目关闭及时率':
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'trainClose'}})
            break;
          case '宏站本年新建地面塔项目数':
            this.$router.push({name: 'NewTower'})
            break;
          case '运营商平均每站址租户数':
            this.$router.push({name: 'OperatorTenant'})
            break;
          case '营收款欠款占收比':
            this.$router.push({name: 'AssessTarget', query:{id: '1007'}})
            break;
          case '营业收入增长率':
            this.$router.push({name: 'AssessTarget', query:{id: '1064'}})
            break;
          case 'EBITDA率':
            this.$router.push({name: 'AssessTarget', query:{id: '1067'}})
            break;
          case '代垫电费欠款比率':
            this.$router.push({name: 'AssessTarget', query:{id: '1068'}})
            break;
          case '资产报酬率':
            this.$router.push({name: 'AssessTarget', query:{id: '1081'}})
            break;
          case '利润贡献率':
            this.$router.push({name: 'AssessTarget', query:{id: '1094'}})
            break;
        }
      },
      //公告弹框
      handleNoticeDialog(item, index) {
        this.noticeDialog.list = []
        this.noticeDialog.first = false
        this.noticeDialog.listLength = this.noticeDialog.allList.length - 1
        if(item.key == 'only') {
          this.noticeDialog.currentIndex = 0
        } else {
          this.noticeDialog.currentIndex = index
        }
        this.noticeDialog.show = true
        this.noticeDialog.list.push(item)
      },
      //公告翻页
      handleNext(state) {
        let len = (this.noticeDialog.first == true ? this.noticeDialog.newList.length : this.noticeDialog.allList.length)
        if (state == 'prev') {
          this.noticeDialog.list = []
          this.noticeDialog.currentIndex --
        } else {
          if (this.noticeDialog.currentIndex < len - 1) {
            this.noticeDialog.list = []
            this.noticeDialog.currentIndex ++
          }
        }
        if (this.noticeDialog.first == true) {
          this.noticeDialog.list.push(this.noticeDialog.newList[this.noticeDialog.currentIndex])
        } else {
          this.noticeDialog.list.push(this.noticeDialog.allList[this.noticeDialog.currentIndex])
        }
      }
    },
    beforeDestroy() {
      let user = this.$store.state.userInfo
      user.countLogs = '0'
      this.$store.commit('setUserInfo', user)
    },
    mounted() {
      this.isJudgeFirst()
      this.getMenuList()
      this.getNoticeList()
      this.getFocusInfo()
      this.getVersions()
    }
  }
</script>

<style lang="scss" scoped>
  .banner {
    padding: 12px 8px;
    background: linear-gradient(to bottom, #E71E28, #ffffff);
    position: relative;

    &__img {
      display: block;
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 5px 5px rgba(153, 153, 153, .2);
    }
  }
  .notice {
    padding: 0 8px 12px 45px;
    border-bottom: 1px solid rgba(255, 55, 55, .5);
    background: #fff;
    position: relative;

    &::before {
      content: "";
      float: left;
      margin-left: -38px;
      width: 32px;
      height: 16px;
      background-size: 100%;
      background-image: url(~@/assets/images/notice.png);
    }

    &__wrap {
      padding-left: 6px;
      border-left: 1px solid #E2E2E2;
    }

    &__item {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .functions {
    overflow: hidden;
    box-shadow: 0 5px 5px rgba(153, 153, 153, .1);

    &__inner {
      padding: 6px;
      background: #fff;
      box-sizing: border-box;
      min-height: 80px;

      &::after {
        content: "";
        display: block;
        clear: both;
      }
    }

    &__item {
      float: left;
      width: 25%;
      text-align: center;
      padding: 10px 0;

      &::before {
        content: "";
        display: block;
        margin: 0 auto 6px;
        background-size: auto 80%;
        background-position: center;
        background-repeat: no-repeat;
        height: 30px;
      }
    }

    &__name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &--expand {
      height: 155px;
      position: relative;
      z-index: 1;
      overflow: visible;

      &::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .2);
      }

      .functions__inner {
        position: absolute;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
      }
    }
  }

  @each $icon in classifyRank,
    assessTarget, manageTarget, dailyPaper,
    managePromote, skillPromote, evaluateAnalyze, riskOnline, tenantCom, stationAccount,
    more, ResolveCase, accountPaper, dataQuality, reportForm, accountPeriod, businessEvaluate,comprehensiveScore {
    .functions__item-#{$icon}::before {
      background-image: url(~@/assets/images/home/icon-#{$icon}.png);
    }
  }

  .list {
    padding: 0 8px;

    &__item {
      margin-bottom: 8px;
      background: #fff;
      border: 1px solid #dbdbdb;
      border-radius: 8px;
      padding: 10px 8px 10px 70px;
      position: relative;
    }

    &__title {
      margin-bottom: 10px;
    }

    &__title-text {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      padding-right: 6px;
    }

    &__blocks {
      display: flex;
    }

    &__block {
      flex: 1;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        right: 0;
        top: 5px;
        bottom: 5px;
        width: 1px;
        background: #d0d0d0;
      }

      &:last-child {
        &::before {
          display: none;
        }
      }

      & + & {
        padding-left: 20px;
      }
    }

    &__intro {
      color: #929292;
      font-size: 8px;
    }

    &__nums {
      &-percent {
        font-size: 12px;
        color: #929292;
      }
    }

    &__goal {
      position: absolute;
      right: 5px;
      top: 5px;
      text-align: center;

      &-num {
        color: #515151;
        font-size: 14px;
      }

      &-text {
        color: #929292;
        font-size: 8px;
      }
    }

    &__progress {
      position: absolute;
      width: 54px;
      height: 54px;
      left: 8px;
      top: 50%;
      margin-top: -28px;
    }
  }
  .unscroll {
    overflow: hidden;
  }
  .mask {
    &__notice,
    &__fun,
    &__list {
      position: absolute;
      left: 5px;
      right: 5px;
      border-radius: 8px;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, .5);

      &::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
      }
    }

    &__notice {
      height: 40px;
      top: -10px;
    }

    &__fun {
      top: 0;
      bottom: 0;
    }

    &__list {
      top: 0;
      bottom: 0;
    }

    &__con {
      text-align: center;
      position: absolute;
      width: 100%;


      &--notice {
        top: 50px;
      }

      &--fun {
        top: 105%;
      }

      &--list {
        transform: translateY(-100%);

        .mask__main {
          margin-bottom: 10px;
        }

        .mask__line {
          margin-bottom: 5px;
        }

        .mask__btn {
          margin-bottom: 10px;
        }
      }
    }

    &__line {
      width: 0;
      height: 60px;
      border-left: 1px dashed #fff;
      margin: 0 auto 20px;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 3px;
        background: #fff;
        left: -3px;
      }

      &::before {
        top: 0;
      }

      &::after {
        bottom: 0;
      }
    }

    &__main {
      text-align: center;
      color: #fff;
      border: 1px dashed #fff;
      border-radius: 8px;
      padding: 15px 30px;
      margin-bottom: 30px;
    }

    &__title {
      margin: 0 auto 8px;
      font-size: 18px;
      color: #fff;

      &-num {
        color: #F5A623;
      }
    }

    &__btn {
      outline: none;
      font-size: 16px;
      line-height: 35px;
      border-radius: 18px;
      border: 1px solid #fff;
      padding: 0 15px;
      background: transparent;
      color: #fff;

      &--jump {
        z-index: 4;
        position: absolute;
        right: 15px;
        top: 15px;
      }
    }
  }
  .highest-index {
    position: relative;
    z-index: 3;
  }
  .version-btn {
    position: absolute;
    top: 15px;
    right: 10px;
    background: rgba(231, 30, 40, .5);
    color: #fff;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 12px;
  }
  .version-dialog {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 4;

    &__main {
      position: absolute;
      width: 290px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &__head {
      height: 90px;
      background: linear-gradient(to bottom, #ec4b4f, #ec4648);
      position: relative;
      border-radius: 15px 15px 0 0;

      &-title {
        font-size: 16px;
        color: #fff;
        position: absolute;
        left: 15px;
        top: 20px;
      }

      &::before {
        content: "";
        position: absolute;
        background: #000;
        width: 290px;
        height: 148px;
        background: url(~@/assets/images/bg-version.png);
        background-size: 100% 100%;
        bottom: -1px;
      }
    }

    &__btn {
      text-align: center;
      line-height: 40px;
      border-top: 1px solid #eaeaea;
      color: #d70d17;
      font-size: 15px;
      background: #fff;
      border-radius: 0 0 15px 15px;
    }

    &__body {
      overflow: hidden;
      background: #fff;
    }

    &__versions {
      overflow: auto;
      padding: 0 15px;
      max-height: 400px;
      -webkit-overflow-scrolling: touch;
    }

    &__item {
      padding: 8px 0;

      & + & {
        border-top: 1px solid #eaeaea;
      }
    }

    &__title {
      margin-bottom: 3px;
      text-align: right;
      overflow: hidden;
      color: #999;

      &-left {
        float: left;
        color: #333;
        font-weight: bold;
      }

      &-text {
        color: #333;
        font-weight: bold;
        text-align: left;
      }
    }

    &__item-con {
      white-space: pre-line;
    }

    &__date {
      color: #969799;
      font-size: 12px;
    }
  }
  .head-action {
    display: flex;
    padding: 12px 8px 0;
    background: linear-gradient(to bottom, #e81f29, #E71E28);
    align-items: center;

    &__left {
      flex: 1;
    }

    &__right {
      flex: none;
    }

    &__search-wrap {
      background: #fff;
      padding: 0 45px 0 30px;
      border-radius: 15px;
      position: relative;
      border: 1px solid transparent;

      &::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        background: url(~@/assets/images/icon-search-gray.png);
        background-size: 100% 100%;
        top: 50%;
        margin-top: -7px;
        left: 10px;
      }
    }

    &__search {
      display: block;
      width: 100%;
      border: 0;
      outline: none;
      padding: 4px 0;

      &-cancel {
        color: #888;
        padding-left: 10px;
      }

      &-btn {
        position: absolute;
        right: 0;
        padding: 0 10px 0 0;
        outline: none;
        background: transparent;
        border: 0;
        top: 0;
        bottom: 0;
      }
    }

    &__concern {
      color: #fff;
      padding-left: 10px;

      &::before {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: top;
        background: url(~@/assets/images/icon-heart.png) no-repeat left center;
        background-size: 80% 80%;
      }
    }

    &--bg-white {
      background: #fff;
      padding-bottom: 12px;

      .head-action__search-wrap {
        border-color: #f00;
      }
    }
  }
  .dialog-search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 4;

    &__top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    &__content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 50px;
      overflow: hidden;
    }

    &__scroll {
      overflow: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-overflow-scrolling: touch;
    }

    &__results {
      padding: 0 15px;
    }

    &__item {
      padding: 10px 0;

      & + & {
        border-top: 1px solid #e5e5e5;
      }
    }
  }
  .notice-dialog {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 4;

    &__main {
      width: 80%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &__head {
      line-height: 40px;
      background: linear-gradient(to bottom, #ec4b4f, #ec4648);
      position: relative;
      border-radius: 15px 15px 0 0;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }

    &__body {
      overflow: auto;
      padding: 15px;
      height: 200px;
      -webkit-overflow-scrolling: touch;
      background: #fff;
    }

    &__btns {
      background: #fff;
      display: flex;
      border-top: 1px solid #eaeaea;
      border-radius: 0 0 15px 15px;
      overflow: hidden;
    }

    &__btn {
      display: block;
      background: transparent;
      flex: 1;
      text-align: center;
      line-height: 36px;
      border: 0;
      outline: none;
      color: #d70d17;
      position: relative;

      &:disabled {
        color: #ccc;
      }

      & + & {
        &::before {
          content: "";
          position: absolute;
          width: 1px;
          height: 20px;
          background: #eaeaea;
          left: 0;
          top: 50%;
          margin-top: -10px;
        }
      }

      &-know {
        font-size: 14px;
        margin: 20px auto 0;
        border-radius: 18px;
        background: #eb4b4f;
        color: #fff;
        padding: 0 15px;
      }
    }

    &__title {
      color: #333;
      font-weight: bold;
      margin-bottom: 3px;
    }

    &__item-con {
      white-space: pre-line;
    }

    &__date {
      color: #969799;
      font-size: 12px;
    }
  }
</style>
